import React, { Component } from 'react';
import { getZuixinMv } from '../../utils/api';
import '../../style/all.css';
import './Zuixinmv.css';

export default class Zuixinmv extends Component {
	state = {
		currentArea: (JSON.parse(sessionStorage.getItem('mvlocation')) && JSON.parse(sessionStorage.getItem('mvlocation')).currentArea) || '全部',
		currentType: (JSON.parse(sessionStorage.getItem('mvlocation')) && JSON.parse(sessionStorage.getItem('mvlocation')).currentType) || '全部',
		currentOrder: (JSON.parse(sessionStorage.getItem('mvlocation')) && JSON.parse(sessionStorage.getItem('mvlocation')).currentOrder) || '上升最快',
		limit: 12,
		offset: (JSON.parse(sessionStorage.getItem('mvlocation')) && JSON.parse(sessionStorage.getItem('mvlocation')).offset) || 0,
		list: [],
		currentPageNum: (JSON.parse(sessionStorage.getItem('mvlocation')) && JSON.parse(sessionStorage.getItem('mvlocation')).currentPageNum) || 1
	}
	componentDidMount () {
		window.scroll(0, 0);
		this.getZuixinMvs();
	}
	async getZuixinMvs () {
		let { currentArea, currentType, currentOrder, limit, offset } = this.state;
		const list = await getZuixinMv(currentArea, currentType, currentOrder, limit, offset);
		this.setState({
			list: list.data
		})
	}
	async changeArea (area) {
		let { currentType, currentOrder, limit } = this.state;
		const list = await getZuixinMv(area, currentType, currentOrder, limit, 0);
		this.setState({
			list: list.data,
			currentArea: area,
			currentPageNum: 1,
			offset: 0
		})
	}
	async changeType (type) {
		let { currentArea, currentOrder, limit } = this.state;
		const list = await getZuixinMv(currentArea, type, currentOrder, limit, 0);
		this.setState({
			list: list.data,
			currentType: type,
			currentPageNum: 1,
			offset: 0
		})
	}
	async changeOrder (order) {
		let { currentArea, currentType, limit } = this.state;
		const list = await getZuixinMv(currentArea, currentType, order, limit, 0);
		this.setState({
			list: list.data,
			currentOrder: order,
			currentPageNum: 1,
			offset: 0
		})
	}
	goNext = async () => {
		let { currentArea, currentType, currentOrder, limit, offset, currentPageNum } = this.state;
		const list = await getZuixinMv(currentArea, currentType, currentOrder, limit, offset + limit);
		this.setState({
			list: list.data,
			offset: offset + limit,
			currentPageNum: currentPageNum + 1
		})
	}
	goPrev = async () => {
		let { currentArea, currentType, currentOrder, limit, offset, currentPageNum } = this.state;
		const list = await getZuixinMv(currentArea, currentType, currentOrder, limit, offset - limit);
		this.setState({
			list: list.data,
			offset: offset - limit,
			currentPageNum: currentPageNum - 1
		})
	}
	goMvDetail (id) {
		let { currentArea, currentType, currentOrder, currentPageNum, offset } = this.state;
		let obj = {
			currentArea,
			currentType,
			currentOrder,
			currentPageNum,
			offset
		}
		sessionStorage.setItem('mvlocation', JSON.stringify(obj));
		this.props.history.push(`/mvdetail?id=${id}`);
	}
	render () {
		let { currentArea, currentType, currentOrder, list, currentPageNum } = this.state;
		return (
			<div className='mv main'>
				<div className='mv_tag'>
					<div className='mv_tag_f'>
						<h2>地区</h2>
						<ul>
							<li onClick={() => { this.changeArea('全部') }} className={currentArea === "全部" ? 'active red' : 'red'}>全部</li>
							<li onClick={() => { this.changeArea('内地') }} className={currentArea === "内地" ? 'active red' : 'red'}>内地</li>
							<li onClick={() => { this.changeArea('港台') }} className={currentArea === "港台" ? 'active red' : 'red'}>港台</li>
							<li onClick={() => { this.changeArea('欧美') }} className={currentArea === "欧美" ? 'active red' : 'red'}>欧美</li>
							<li onClick={() => { this.changeArea('日本') }} className={currentArea === "日本" ? 'active red' : 'red'}>日本</li>
							<li onClick={() => { this.changeArea('韩国') }} className={currentArea === "韩国" ? 'active red' : 'red'}>韩国</li>
						</ul>
					</div>
					<div className='mv_tag_f'>
						<h2>类型</h2>
						<ul>
							<li onClick={() => { this.changeType('全部') }} className={currentType === "全部" ? 'active red' : 'red'}>全部</li>
							<li onClick={() => { this.changeType('官方版') }} className={currentType === "官方版" ? 'active red' : 'red'}>官方版</li>
							<li onClick={() => { this.changeType('原生') }} className={currentType === "原生" ? 'active red' : 'red'}>原生</li>
							<li onClick={() => { this.changeType('现场版') }} className={currentType === "现场版" ? 'active red' : 'red'}>现场版</li>
							<li onClick={() => { this.changeType('网易出品') }} className={currentType === "网易出品" ? 'active red' : 'red'}>网易出品</li>
						</ul>
					</div>
					<div className='mv_tag_f'>
						<h2>排序</h2>
						<ul>
							<li onClick={() => { this.changeOrder('上升最快') }} className={currentOrder === "上升最快" ? 'active red' : 'red'}>上升最快</li>
							<li onClick={() => { this.changeOrder('最热') }} className={currentOrder === "最热" ? 'active red' : 'red'}>最热</li>
							<li onClick={() => { this.changeOrder('最新') }} className={currentOrder === "最新" ? 'active red' : 'red'}>最新</li>
						</ul>
					</div>
				</div>
				<div className='mv_content'>
					<ul className='mv_box'>
						{list.map((item) => (
							<li key={item.id} onClick={() => { this.goMvDetail(item.id); }} className='perse25'>
								<div className='img tophover'>
									<img width='100%' height='100%' src={item.cover} alt="" />
									<div className='gd_mv_hover'></div>
								</div>
								<p>{item.name}<br /><span>{item.artistName}</span></p>
							</li>
						))}
					</ul>
				</div>
				<div className='page'>
					<div className='page'>
						{currentPageNum < 2 ? null : <span onClick={this.goPrev}>&lt;前往上一页</span>}
						<span onClick={this.goNext}>前往下一页&gt;</span>
					</div>
				</div>
			</div>
		)
	}
}
